<template>
	<view class="identityAuthentication">
		<view class="top">
			<view class="imgs">
				<view class="" >
					<image v-if="!data.obj.certFileFront" src="/static/img/index/54.png" mode="widthFix"></image>
					<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.certFileFront"
						mode="aspectFill"></image>
					身份证人像面
				</view>
				<view class="" >
					<image v-if="!data.obj.certFileBack" src="/static/img/index/55.png" mode="widthFix"></image>
					<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.certFileBack"
						mode="aspectFill"></image>
					身份证国徽面
				</view>
			</view>
			<view class="input">
				<view class="">
					姓名：
					<text  type="text"  >
						{{data.obj.realName}}
					</text>
				</view>
				<view class="">
					身份证：
					<text  type="text"  >
						{{data.obj.certNo}}
					</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import imgUpload from '@/utils/imgUpload.ts'
	import { reactive } from 'vue'
	import { queryUserInfo} from '@/utils/api/userInfo.ts'
	
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
		obj: {certFileBack:'',certNo:'',realName:'',certFileFront:''}
	})
	 
	 
	const doQueryUserInfo =  () => {
		console.log("alalskajdlak")
		queryUserInfo().then(res=>{
			data.obj.certFileBack=res.data.appUserAuthentication.certFileBack
			data.obj.certFileFront=res.data.appUserAuthentication.certFileFront
			data.obj.certNo=res.data.appUserAuthentication.certNo
			data.obj.realName=res.data.appUserAuthentication.name
		})
	}
	 
	doQueryUserInfo()
	 
</script>

<style lang="scss">
.identityAuthentication{
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding:24rpx;
	background: #F4F6FA;
	>.top{
		flex: 1;
		.imgs{
			background: #fff;
			border-radius: 24rpx;
			padding: 48rpx 90rpx;
			>view{
				color: #8C8C8C;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					border-radius: 24rpx;
					width: 100%;
					height: 312rpx;
					margin-bottom: 32rpx;
				}
			}
			>view:nth-of-type(2){
				margin-top: 62rpx;
			}
		}
		.input{
			background: #fff;
			border-radius: 24rpx;
			padding: 0 32rpx;
			margin-top: 20rpx;
			view{
				height: 100rpx;
				display: flex;
				align-items: center;
				input{
					flex: 1;
					text-align: right;
					margin-left: 50rpx;
					font-size: 28rpx;
					
				}
				.placeholderClass{
					color: #BFBFBF;
				}
			}
			view:nth-of-type(1){
				border-bottom: 1rpx solid #F0F0F0;
			}
		}
	}
	>.bot{
		line-height: 96rpx;
		text-align: center;
		background: #F0F0F0;
		font-size: 36rpx;
		color: #BFBFBF;
		border-radius: 96rpx;
		margin-top: 60rpx;
	}
	.active{
		background: #6B64D3;
		color: #fff;
	}
}
</style>